<template>
	<u-form :model="form" ref="uForm" label-position="top">
		<view class="form-card">
			<view class="form-header">
				<view class="form-header__title">我的推广</view>
				<view class="iconfontPT iconclose form-header__close" @tap="handleClose"></view>
			</view>
			<view class="form-content">
				<u-form-item label="手机号" prop="phone" :label-style="labelStyle">
					<u-input type="number" v-model="form.phone" placeholder="请输入客户手机号" trim/>
				</u-form-item>
				<u-form-item label="验证码" prop="code" :label-style="labelStyle">
					<u-input type="number" v-model="form.code" placeholder="请输入验证码" trim/>
					<template v-slot:right>
						<view class="form-content__button" @tap="handleSendMessage">{{tips}}</view>
						<u-verification-code :seconds="seconds" ref="uCode" @change="handleChange"></u-verification-code>
					</template>
				</u-form-item>
			</view>
			<view class="form-action">
				<button type="warn" class="form-action__button" :disabled="buttonDisable" @tap="handleCreateQRCode">私人二维码</button>
				<button type="warn" class="form-action__button" @tap="handleJump">我的小队</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</u-form>
</template>

<script>
	import {sendMessage,createQRCode} from '@/apis/personal/index.js'
	export default{
		data(){
			return {
				tips: '',
				seconds: 60,
				messageSented: false,
				form:{
					phone:'',
					code:''
				}
			}
		},
		computed:{
			labelStyle(){
				return {fontSize: '33rpx',fontWeight: 'bold',color: '#333333'}
			},
			buttonDisable(){
				return !(this.form.phone && this.form.code && this.messageSented)
			}
		},
		methods:{
			handleClose(){
				this.$emit('close',false)
			},
			handleJump(){
				this.$emit('jump')
			},
			handleChange(value){
				this.tips = value
			},
			/**
			 * 发送验证码
			 */
			async handleSendMessage(){
				try{
					if(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)){
						if(this.$refs.uCode.canGetCode){
							uni.showLoading({title: '发送验证码...'})
							const {code,msg} = await sendMessage({mobile:this.form.phone,event:'promote'})
							if(code === 1){
								this.messageSented = true
								this.$refs.uToast.show({title: '验证码已发送，注意查收！',type:'success',position:'top'})
							}else{
								uni.showModal({ title:'',content:msg,showCancel:false})
							}
							this.$refs.uCode.start()
						}
					}else{
						this.$refs.uToast.show({title: '手机号格式不正确!',type:'warning',position:'top'})
					}
				}catch(e){
					uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
				}finally {
					uni.hideLoading()
				}
			},
			/**
			 * 生成二维码
			 */
			async handleCreateQRCode(){
				try{
					if(/^\d{4}$/.test(this.form.code)){
						uni.showLoading({title: '生成二维码...'})
						const xnFactoryId = uni.getStorageSync('xn_factory_id')
						const {code,data,msg} = await createQRCode({
							phone:this.form.phone,
							xn_factory_id:xnFactoryId,
							captcha:this.form.code
						})
						if(code === 1){
							this.messageSented = false
							this.$emit('change',data)
							// this.$emit('change',$baseHost.car+'/uploads/code/15760393130/202009020948314929.jpg')
						}else{
							uni.showModal({ title:'提示',content:msg,showCancel:false})
						}
					}else{
						this.$refs.uToast.show({title: '验证码不正确!',type:'warning',position:'top'})
					}
				}catch(e){
					uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
				}finally {
					uni.hideLoading()
				}
			}
		}
	}
	
</script>

<style lang="scss">
	.form-card{
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 50rpx;
		box-sizing: border-box;
	}
	.form-header{
		display: flex;
		height: 50rpx;
		justify-content: center;
		align-items: center;
		position: relative;
		&__title{
			font-size: 47rpx;
			font-weight: bold;
			color: #333333;
		}
		&__close{
			font-size: 47rpx;
			color: #9B9B9B;
			position: absolute;
			right: 0;
		}
	}
	.form-content{
		margin: 50rpx 0;
		&__button{
			color: #F14434;
			font-size: 24rpx;
			font-weight: bold;
		}
	}
	.form-action{
		display: flex;
		justify-content: space-between;
		&__button{
			font-size: 28rpx;
			font-weight: bold;
			width: 235rpx;
			height: 80rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F14434;
		}
	}
</style>
